<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<button class="back-arrow" @click="goBack"></button>
		<p>在线支付</p>
	  </header>
	  <!-- 订单信息部分 -->
	  <h3>订单信息：</h3>
	  <div class="order-info">
		<p>
		  {{ orders.business.businessName }}
		  <i class="fa fa-caret-down" @click="detailetShow"></i>
		</p>
		<p>&#165;{{ orders.orderTotal }}</p>
	  </div>
	  <!-- 订单明细部分 -->
	  <ul class="order-detailet" v-show="isShowDetailet">
		<li v-for="item in orders.list">
		  <p>{{ item.food.foodName }} x {{ item.quantity }}</p>
		  <p>&#165;{{ (item.food.foodPrice * item.quantity).toFixed(2) }}</p>
		</li>
		<li>
		  <p>配送费</p>
		  <p>&#165;{{ orders.business.deliveryPrice }}</p>
		</li>
	  </ul>
	  <!-- 支付方式部分 -->
	  <ul class="payment-type">
		<li>
		  <img src="../assets/alipay.png">
		  <i class="fa fa-check-circle"></i>
		</li>
		<li>
		  <img src="../assets/wechat.png">
		</li>
	  </ul>
	  <div class="payment-button">
		<button :disabled="isPaymentProcessing" @click="submitPayment">
		  {{ paymentButtonText }}
		</button>
	  </div>
	  <!-- 底部菜单部分 -->
	  <Footer></Footer>
	</div>
  </template>
  
  <script>
  import Footer from '../components/Footer.vue';
  import request from '../request.js';
  export default {
	name: 'Payment',
	data() {
	  return {
		orderId: this.$route.query.orderId,
		orders: {
		  business: {},
		  list: [],
		  orderTotal: 0
		},
		isShowDetailet: false,
		isPaymentProcessing: false,
		paymentButtonText: '确认支付'
	  }
	},
	created() {
	  this.fetchOrders();
	},
	methods: {
	  goBack() {
		console.log('Trying to go back...');
		this.$router.go(-1); // 相当于浏览器的后退操作
	  },
	  fetchOrders() {
		request.get(`orders/${this.orderId}`).then(response => {
		  this.orders = response.data;
		}).catch(error => {
		  console.error(error);
		});
	  },
	  detailetShow() {
		this.isShowDetailet = !this.isShowDetailet;
	  },
	  submitPayment() {
      this.isPaymentProcessing = true;
      this.paymentButtonText = '支付中...';

      // 模拟支付请求
      setTimeout(() => {
        // 假设支付成功
        this.updateOrderStatus(); // 更新订单状态为已支付
      }, 2000);
    },
    updateOrderStatus() {
      request.put(`/orders/${this.orderId}`, this.$qs.stringify({
        orderId: this.orderId
      })).then(response => {
        this.paymentButtonText = '支付成功';
        this.isPaymentProcessing = false;
        // 重新获取订单列表
        this.$emit('update-order-list');
		 // 跳转到订单列表页面
	this.$router.push({ path: '/orderList' });
      }).catch(error => {
        console.error(error);
        this.paymentButtonText = '支付失败，请重试';
        this.isPaymentProcessing = false;
      });
    }
	},
	components: {
	  Footer
	}
  }
</script>
<style scoped>
/****************** 支付提示 ******************/
.wrapper .payment-button button {
  width: 100%;
  height: 10vw;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #38CA73;
  color: #fff;
  font-size: 18px; /* 调整这里的值来改变文本大小 */
  letter-spacing: 1px; /* 调整字间距，可选 */
}
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
     /****************** 返回键 ******************/
 
.back-arrow {
  position: fixed; /* 固定定位 */
  left: 2.5vw; /* 距离屏幕左端像素 */
  top: 2.5vw; /* 距离屏幕顶部像素 */
  width: 8vw; /* 使用视口宽度的百分比 */
  height: 8vw; /* 使用视口宽度的百分比，保持宽高比 */
  background-color: rgba(0, 151, 255, 0.5); /* 半透明的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* 隐藏边框 */
  transition: background-color 0.3s ease; /* 背景颜色变化动画 */
}

.back-arrow::before {
  content: '\f053'; /* 使用 FontAwesome 的左箭头图标 */
  font-family: 'FontAwesome'; /* FontAwesome 字体 */
  font-size: 5vh; /* 使用视口高度的百分比，确保在不同设备上也合适 */
  color: #fff; /* 字体颜色 */
  transition: color 0.3s ease; /* 字体颜色变化动画 */
}

.back-arrow:hover::before {
  color: #0a2ddc; /* 鼠标悬停时的颜色变化 */
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3); /* 鼠标悬停时的背景颜色变化为更透明 */
}
	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/****************** 支付方式部分 ******************/
	.wrapper .payment-type {
		width: 100%;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*去掉外轮廓线*/
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #fff;
	}
</style>